<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文件拖拽上传并以base64传给后台</title>
    
    <!-- 1. 文件拖拽上传并以base64传给后台
    2. 可以有缩列图显示
    3. 可以删除缩略图，并同时更新传给后端的数据 -->
    <style>
            ul,li {
              list-style-type: none;
              margin:0;
              padding:0;
            }
            .out-main-top {
              height:auto;
              overflow: auto;
              display: flex;
              justify-content: flex-start;
            }
            .out-main-top button {
             padding: 10px 40px;
             font-weight: bold;
             font-size: 21px;
             height: 52px;
             margin-left: 30px;
             vertical-align: middle;
             margin-top: 60px;
            }
            .canvas-img {
              margin-top:20px;
              clear: both;
            }
            .canvas-img li{
              width:150px;
              height:150px;
              position: relative;
              border:1px solid #ccc;
               cursor: pointer;
               float: left;
               margin-right:10px;
               overflow: hidden;
            }
            
            .canvas-img li img {
              width:90%;
              position: absolute;
              left:50%;
              top:50%;
              transform: translate(-50%,-50%);
            }
            .canvas-img li .close {
               position: absolute;
               right: 4px;
               top: 1px;
               font-style: normal;
               font-size: 12px;
               color: #666;
            }
      
            .drag-box {
               width:250px;
               height:200px;
               border:1px dashed #ccc;
               margin-left:20px;
               color: #ccc;
               font-size: 15px;
               text-align: center;
               padding-top: 90px;
               box-sizing: border-box;
            }
       
           </style>
</head>
<body>

    <div class="out-main-top">
            <div id="dropbox" class="drag-box">
                  或者将文件拖到此处
            </div>
            <!-- <button onclick="uploadFileNow()">上传</button> -->
            <button type="button" onclick="uploadFileNow()">上传</button>
   </div>
          <ul id="canvasImg" class="canvas-img"></ul>

    <script>
        var canvasImg = document.getElementById('canvasImg');
        //目标对象
        var dropbox = document.getElementById('dropbox');
        var allBaseImg=[]; //需要给到后台的图片数据
        var AllowImgFileSize = 1024 * 400; //上传图片最大值(单位字节)超过400K上传失败

        dropbox.addEventListener('dragover',function(ev){
          ev.preventDefault();
          
      // 阻止默认的些事件方法等执行。
      // 在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。
        })
        dropbox.addEventListener('drop',function(ev){
           console.log(ev);
           // 通知web浏览器不要执行与事件关联的默认行为
           ev.preventDefault();
           console.log(ev.dataTransfer.files);

           var dtfiles = ev.dataTransfer.files;
           //转化成base64
           transferDataToBase64(dtfiles);

        });

        function transferDataToBase64(files){
          for(let i=0,len = files.length; i<len;i++) {
              var file =  files[i];
              var reader = new FileReader();
              reader.readAsDataURL(file);//转化为base64的格式 ，异步
              reader.onload = function(ev){
                  var base64Img = ev.target.result;
                  var index =  allBaseImg.indexOf(base64Img);   //includes          
                  if(index!=-1){
                    return;
                  }
                  //图片大小是否符合
                  if(base64Img.length>AllowImgFileSize){
                    alert('图片上传失败，需要小于400K');
                    return;
                  }
                  var str = `<li> <img src='${base64Img}'> <i class='close'>X</i></li>`;
                  canvasImg.innerHTML += str;

                  allBaseImg.push(base64Img);

              }
          }
        }

        //监听缩略图 的删除事件 ,事件委托
        canvasImg.addEventListener('click',function(ev){
          var target = ev.target;
          if(target.className=='close'){
             var thisbase = target.previousElementSibling; //方式一
            // var thisbase =  target.parentElement.querySelector('img') //方式二
            
            var sindex = allBaseImg.indexOf(thisbase);
            allBaseImg.splice(sindex,1); //更新数据

            //删除缩略图
            target.parentElement.remove();

          }
        })

        //需要调接口，给图片数据到后端服务
        function uploadFileNow(){
            console.log(allBaseImg);
            console.log('调接口');
        }
    </script>
</body>
</html>